<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<jsp:include page="/WEB-INF/backstage/util.jsp"></jsp:include>
</head>
<body>
	<form id="myForm2" method="post">
	<button type="button" class="btn btn-primary" data-toggle='modal'
			data-target='#myModal'>
			<span class="glyphicon glyphicon-plus"></span>用户新增
		</button>
	</form>
	
		<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						onclick="ClearVal()">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">角色</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="form" method="post">
						<input type="hidden" name="role_id" id="role_id" value="0">
						<input type="hidden" name="role_name2" id="role_name2" >
						<div class="form-group">
							<label for="role_name" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="role_name"
									name="role_name" placeholder="请输入角色名称">
							</div>
							</div>
						 <div class="form-group" id="formdiv">
							<label for="role_id2" class="col-sm-2 control-label">上级角色</label>
							<div class="col-sm-10">
								<select class="form-control" id="role_id2" name="role_id2">
									<%-- <c:forEach items="${list2 }" var="a">
										<option value="${a.role_id }">${a.role_name }</option>
									</c:forEach> --%>
								</select>
							</div>
						</div>
						
						<div class="form-group">
						<label for="role_remark" class="col-sm-2 control-label">备注</label>
						<div class="col-sm-10">
							<textarea cols="50" rows="15" name="role_remark" id="role_remark"></textarea>
						</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default"  data-dismiss="modal"
					onclick="ClearVal()">关闭</button>
					<button type="button" class="btn btn-primary" 
						onclick="Save_SysRole()">保存</button>
				</div>
			</div>
		</div>
	</div>


<form method="post" id="myForm">
	<table class="table-hover table-condensed table-bordered" width="100%">
		<tr>
			<th>编号</th>
			<th>角色名称</th>
			<th>当前状态</th>
			<th>备注</th>
			<th>编辑模式</th>
			<th>创建时间</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="role" varStatus="statu">
			<tr>
				<td>${statu.index+1 }</td>
				<td>${role.role_name }</td>
				<td>${role.status=='0'?'禁用':role.status=='1'?'启用':'未知' }</td>
				<td>${role.role_remark }</td>
				<td>${role.edit_mode=='0'?'只读':role.edit_mode=='1'?'可编辑':'未知' }</td>
				<td><fmt:formatDate value="${role.create_time }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
				<td><button type="button" class='btn btn-info' onclick="deleteSysRole(${role.role_id})">
				<span class='glyphicon glyphicon-remove'></span>删除</button>
				 <button type='button'  class='btn btn-info' data-toggle='modal' data-target='#myModal' 
				 onclick="updateSysRole(${role.role_id})"><span class='glyphicon glyphicon-pencil'></span>修改</button>
				</td>
			</tr>
		</c:forEach>
	</table>
</form>

</body>
<script>
	//修改
	function updateSysRole(role_id){
		$("#role_id2").attr("disabled", true);
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath }/role/updateSysRole",
			data:{"role_id":role_id},
			success:function(msg){
				var sys=eval('('+msg+')');
				$("#role_id").val(sys.role_id);
				$("#role_name").val(sys.role_name);
				$("#role_name2").val(sys.role_name);
				$("#role_id2").val(sys.parent_id);
				$("#role_remark").val(sys.role_remark);
			}
		});
	}

	//填充下拉框
	 $(function(){
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/role/querySysRole",
			success:function(msg){
				$.each(msg,function(index,role){
					var option="<option value="+role.role_id+">"+role.role_name+"</option>";
					$("#role_id2").append(option);
				});	
			}
		});
	}); 
	
	//清空
	function ClearVal(){
		$("#form").data('bootstrapValidator').resetForm(); //刷新表单
		$("#role_id").val("0");
		$("#role_name").val("");
		$("#role_name2").val("");
		$("#role_remark").val("");
		$("#role_id2").attr("disabled", false);
	}
	
	//新增和修改
	function Save_SysRole(){
		var bootstrapValidator = $("#form").data('bootstrapValidator'); //获取表单对象
		bootstrapValidator.validate();//触发全部验证 
		if(bootstrapValidator.isValid()){
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/role/savetSysRole",
			data:$("#form").serialize(),
			success:function(msg){
				parent.location.reload();
			}
		});
		}
	}
	
	//删除
	function deleteSysRole(role_id){
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath }/role/deleteSysRole",
			data:{"role_id":role_id},
			success:function(msg){
				parent.location.reload();
			}
		});
	}
	
	//校验
	$(function(){
		$("#form").bootstrapValidator({
			live : 'enabled',
			feedbackIcons : { //验证时显示的图标
				valid : 'glyphicon glyphicon-ok', //正确图标
				invalid : 'glyphicon glyphicon-remove', //错误图标
				validating : 'glyphicon glyphicon-refresh' //正在更新图标
			},
			fields : { //要验证哪些字段
				role_name : {
					validators : {//验证
						notEmpty : { //非空判断
							message : '角色名称不能为空' //验证错误时的信息，
						},
						 remote : {
								message : '角色名已存在',
								url : '${pageContext.request.contextPath }/role/findByIdSysRole',
								type : 'post',
								delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
								data:function(validator){
									return{
										role_name:$("#role_name").val(),
										role_name2:$("#role_name2").val()
									}
								}
							} 
					},
				},
				role_remark:{
					 validators: {
	                     notEmpty: {
	                         message: '不能为空'
	                     }
	                 }
				}
			}
		});
	});
</script>
</html>